<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .img-upload{
            display: inline-block;
            width: 200px;
            height: 200px;
            border: 1px solid #cccccc;
            position: relative;
        }
        .img-upload >img{
            width: 100%;
            height: 100%;
        }
        .img-upload > input[type=file]{
            display: none;
        }
        .img-upload > .loading{
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: rgba(0, 0, 0, 0.6);
            object-fit:scale-down;
        }

    </style>
    <script src="./js/vue.js"></script>
    <script src="./js/jquery-1.9.0.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            因为 file 文件选择器 在 w3c 的规范中是只读标签，只能通过JS代码方式获取选中的结果
            而无法通过JS方式对value进行赋值操作，所以vue 无法对该标签完成双向数据绑定
            + w3c原文 You cannot set the value of a file picker from a script 
         -->
        <!-- <input type="file" v-model="file"> -->
        <label class="img-upload">
            <img :src="path">
            <img v-show="showLoading" class="loading" src="./img/loading.gif">
            <input type="file" @change="changeImg($event.target)">
        </label>
        <br>
        <input type="button" value="文件上传" @click="uploadImg()">
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            file:"",
            showLoading:false,
            path:"./img/add.png",
            file:null
        },
        methods: {
            changeImg(fileDom){
                // console.log(fileDom.value);
                // console.log(fileDom.files);
                this.file = fileDom.files[0];
                // this.path = "file:///"+fileDom.value;
                // 必须将本地选择文件转换为网络文件
                // JS提供了 对以加载的本地文件进行模拟网络地址生成的操作方法
                // window.URL.createObjectURL(文件的二进制数据);  // blob://
                this.path = window.URL.createObjectURL(fileDom.files[0])
            },
            uploadImg(){
                this.showLoading = true;
                // 通过ajax语法向PHP 服务器上传图片文件
                // let fd = new FormData();  --> ajax文件上传参数
                // fd.append("file",this.file)
                // console.log(this.file);
                let fd = new FormData();
                fd.append("headImage",this.file)
                // vue 方法中如果出现回调，除非特性需求，建议回调以 箭头函数定义，保持函数内this指向
                $.ajax({
                    url:"http://127.0.0.1:80/uploadTest.php",
                    method:"post",
                    data:fd,
                    dataType:"json",
                    contentType:false,
                    processData:false,
                    success:(data)=>{
                        console.log(data);
                    },
                    error:()=>{
                        alert("文件上传失败")
                    },
                    complete:()=>{
                        this.showLoading = false;
                    }
                })
            }
        },
        
    })
</script>
</html>